import React from 'react';
import { createTheme, ThemeProvider } from '@mui/material/styles';
import CssBaseline from '@mui/material/CssBaseline';
import { Provider } from 'react-redux';
import ServerManagementContainer from './containers/server-management.jsx';
import QueryBrowserContainer from './containers/query-browser.jsx';
import {HashRouter,Routes, Route,Link} from 'react-router-dom'
import configureStore from './store/configure';
import App from './containers/app'
// import D1 from './De1'
import Tree1 from './Tree1'
import Tab1 from './T1'
const store = configureStore();

const outerTheme = createTheme({
  palette: {
    primary: {
      main: '#0052cc',
    },
    secondary: {
      main: '#edf2ff',
    },
    mode: 'dark',
  },
});
const Index=()=>{
  return(<div>
    <p><a href="#/manage">manage</a></p>
    <p><a href="#/tree">Tree1</a></p>
    <p><a href="#/tab1">Tab1</a></p>
    {/*<p><a href="#/">/</a></p>*/}
  </div>)
}
export default function Root(props){
    return (
    <ThemeProvider theme={outerTheme}>
      <CssBaseline />
      <Provider store={store}>
        <App>
          <HashRouter>
              <Routes>
                <Route path="/manage" element={<ServerManagementContainer />} />
                <Route path="/server/:id" element={<QueryBrowserContainer />} />
                {/*<Route path="/" element={<ServerManagementContainer />} />*/}
                <Route path="/" element={<Index />} />
                <Route path="/tree" element={<Tree1 />} />
                <Route path="/tab1" element={<Tab1 />} />
              </Routes>
          </HashRouter>
        </App>
      </Provider>
    </ThemeProvider>
    );
}

